<!--
 * @Author: hifishroom
 * @Date: 2021-08-26 17:21:24
 * @LastEditTime: 2021-09-04 12:41:49
 * @FilePath: \backstage\src\views\home\TimeView.vue
-->
<template>
  <div class="">
    <h1 class="text-center time-title">
      <em class="iconfont mr">&#xe616;</em>发展历程
    </h1>
    <div class="flex time-box">
      <div v-for="(item, index) in list" :key="index" class="flex-grow">
        <div v-if="index % 2 == 0" class="flex time-item">
          <div class="t-img-box">
            <img :src="item.img" alt="" class="time-img" />
          </div>
          <div class="t-text-box">
            <p class="text-center using">{{ item.time }}</p>
            <p class="text-center twin t-text-two">{{ item.e }}</p>
          </div>
        </div>
        <div v-else class="flex time-item ">
          <div class="t-text-box flex t-text-box2">
            <p class="text-center using">{{ item.time }}</p>
            <p class="text-center twin t-text-two">{{ item.e }}</p>
          </div>
          <div class="t-img-box">
            <img :src="item.img" alt="" class="time-img" />
          </div>
        </div>
      </div>
      <timestamp class="times" />
    </div>
  </div>
</template>

<script>
import Timestamp from "components/common/timestamp/Timestamp.vue";
export default {
  components: { Timestamp },
  name: "TimeView",
  data() {
    return {
      list: [
        {
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091104%2Fpcevtvimuxrpcevtvimuxr.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633322407&t=50e133608f5514a2a118ebd0dfa41659",
          time: "2020年9月",
          e: "发现新的亿吨级油气区"
        },
        {
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fuploadfile.bizhizu.cn%2Fup%2Fb3%2F6a%2Fc1%2Fb36ac11941eace625090bfe434f33b0d.jpg.source.jpg&refer=http%3A%2F%2Fuploadfile.bizhizu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632566046&t=90d4705067c237ee59dc975fad8467e0",
          time: "2020年10月",
          e: "2021年全国早稻总产量2802万吨"
        },
        {
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F52fc8d3b394e9.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633322477&t=bae7bb5f4361de4b3521b2588153cc08",
          time: "2020年11月",
          e: "全面规范公有教育资源的使用"
        },
        {
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F577726444295a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633322477&t=9d20751d471c67a2f98b72f24b23d602",
          time: "2020年12月",
          e: "累计报告接种新冠病毒疫苗19.75亿剂次"
        },
        {
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.tt98.com%2Fbizhi%2F20191204%2Ff731d31848c10591d96e9ab95b88e105.jpg&refer=http%3A%2F%2Fimg1.tt98.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633322407&t=45a43dd86974bec512f8663a1234b94d",
          time: "2021年1月",
          e: "全球累计新冠肺炎确诊病例212357898例"
        }
      ]
    };
  }
};
</script>

<style lang="scss">
.time-box {
  position: relative;
  height: 400px;
  gap: 15px;
}

.time-title {
  font-size: 30px;
  margin-bottom: 20px;
  em {
    font-size: 30px;
  }
}

.times {
  position: absolute;
  width: 100%;
  top: 50%;
}

.time-img {
  width: 150px;
  height: 150px;
  border-radius: 14px;
}

.time-item {
  flex-direction: column;
  gap: 80px;
  height: 100%;
}

.t-img-box,
.t-text-box {
  height: 40%;
}

.t-img-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.t-text-box2 {
  flex-direction: column;
  justify-content: flex-end;
}

.t-text-two {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
</style>
